<template>
  <div class="main_contain">
    <div class="sidebar" >
    <el-menu
        class="el-menu-vertical"
        :collapse="isCollapse"
        :default-active="path"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        router
    >
      <el-switch v-model="isCollapse" inactive-color="red" active-color="#13ce66" ></el-switch>
      <el-submenu index="1">
        <template #title>
          <i class="el-icon-message"></i>
          <span>我的消息</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/user/infoCenter/unread">
            未读信息
          </el-menu-item>
          <el-menu-item index="/user/infoCenter/read">已读信息</el-menu-item>
        </el-menu-item-group>
      </el-submenu>

      <el-menu-item index="/user/infoCenter/bin">
        <i class="el-icon-delete"></i>
        <template #title>回收站</template>
      </el-menu-item>

      <el-menu-item index="/index/home">
        <i class="el-icon-s-home"></i>
        <template #title>返回首页</template>
      </el-menu-item>
      <el-image :src="logo" style="position:relative; top: 50%"></el-image>
    </el-menu>

  </div>
    <div class="infoBody">
     <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: "info_center",

  beforeRouteEnter(to, from, next) {
    // 添加背景色 margin:0;padding:0是为了解决vue四周有白边的问题
    document.querySelector('body').setAttribute('style', 'margin:0;padding:0')
    next()
  },
  beforeRouteLeave(to, from, next) {
    // 去除背景色
    document.querySelector('body').setAttribute('style', '')
    next()
  },

  data() {
    return {
      isCollapse: false,
      path: this.$route.path,
      logo: '../../src/assets/logo.png'
    }
  },
  methods: {

    handleOpen(key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath)
    },
  },
}
</script>

<style scoped>
.main_contain{
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
}
.infoBody{
  position: relative;
  width: 1100px;
  height: inherit;
}
.sidebar{
  position: relative;
  width: 300px;
  height: 100%;
}
.sidebar .el-menu-vertical{
  height: 100%;
}
.sidebar .el-menu-vertical li,span{
  font-size: 18px;
  letter-spacing: 0.15em;
}
</style>